<%--忽略el表达式  true忽略--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<html>
<head>
    <title>学生成绩展示</title>
    <%@include file="/common/header.jsp"%>
</head>

<body>
<div id="root" style="height: 400px;width: 600px" >
    <i-Button type="warning" size="large" @click="add()">添加</i-Button>

    <i-table :columns="columns1" :data="data1">
    <template slot-scope="{ row, index }" slot="action">
            <i-Button type="success" size="small" @click="update(row)">修改</i-Button>
            <i-Button type="error" size="small"  @click="del(row,index)">删除</i-Button>
    </template>
    </i-table>

    <Modal v-model="modal1" title="修改学生成绩"  @on-ok="doupdate()">
        <i-form :label-width="80">
            <Form-Item label="学生成绩">
                <i-Input v-model="student.score" placeholder="请输入学生成绩"></i-Input>
            </Form-Item>
        </i-form>
    </Modal>
    <Modal v-model="modal2" title="添加学生成绩"  @on-ok="doadd()">
        <i-form :label-width="80">
            <Form-Item label="学生成绩">
                <i-Input v-model="student.score" placeholder="请输入学生成绩"></i-Input>
            </Form-Item>
        </i-form>
    </Modal>
    <div style="margin-left: 200px">
        <template>
            <Page :total="total"
                  :page-size="pageSize"
                  :current.sync="pageNo"
                  show-sizer
                  :page-size-opts="[5,10,15]"
                  @on-change="getList()"
                  @on-page-size-change="pageSize=arguments[0];getList()"
            />
        </template>
    </div>

</div>
<script>
    new  Vue({
        el:"#root",  /*用于绑定属性的元素*/
        data:{   /*用于定义属性*/
            columns1:[
                {title:"学生成绩",key:"score"},
                {title:"学生名字",key:"sname"},
                {title:"科目",key:"subject"},
                {title:"用户操作",slot:"action"}
            ],
            data1:[],
            student:{},
            modal1:false,
            modal2:false,
            total:50,
            pageSize:5,
            pageNo:1
        },
        //用于定义的函数，可以通过return来返回函数值
        mounted() {
            this.getList();
        },
        methods:{
            //使用rest风格进行传参
            getList(){
                axios.get(`${apath}/sys/user/list/${this.pageNo}/${this.pageSize}`).then(
                    ({data})=>{
                    this.data1=data.result.records;
                this.total=data.result.total;
                    }
            )
            },
            update(row){
                alert(row);
                this.student=row;
                this.modal1=true;
            },
            doupdate(){
                axios.post(`${apath}/sys/user/update`,this.student).then(
                    ({data})=>{
                    iview.Message.success("修改学生成绩成功！");
                        this.getList();
            }
            )
            },
            add(){
                this.modal2=true;
            },

            doadd(){
                axios.post(`${apath}/sys/user/add`,this.student).then(
                    ({data})=>{
                    iview.Message.success({content:"学生成绩添加成功"});
                    this.getList();
            }
            )
            },
            del(row,index){
                _this=this;
                iview.Modal.confirm({
                        title:"删除学生成绩",
                        content:"删除将无法复原，请谨慎操作是否删除？",
                        onOk(){
                            axios.get(`${apath}/sys/user/del?sid=`+row.sid).then(
                                ({data})=>{
                                iview.Message.success({content:"学生成绩删除成功!"});
                                _this.getList();
                        }
                        )
                        }
                    }
                )
            }
        }
    })
</script>
</body>
</html>
